<template>
<div>
  <header></header>
  <ul class="goods-list">
    <li>
      <a :href="url1" ca="201788_cxjh5_promote88_buyCoupon$高级全合成机油保养套餐5L">
        <div class="pic"><img src="../../../assets/image/promote88/oil01.png" /></div>
        <div class="info">
        <div class="des">高级全合成机油保养套餐 5L</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>688</span><br/><cite>门市价¥918起</cite></p>
          </dt>
          <dd>
              <span class="goto">立即抢购</span>
          </dd>
        </dl>
        </div>
      </a>
    </li>
    <li>
      <a :href="url2" ca="201788_cxjh5_promote88_buyCoupon$高级全合成机油保养套餐4L">
        <div class="pic"><img src="../../../assets/image/promote88/oil01.png" /></div>
        <div class="info">
        <div class="des">高级全合成机油保养套餐 4L</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>568</span><br/><cite>门市价¥768起</cite></p>
          </dt>
          <dd>
              <span class="goto">立即抢购</span>
          </dd>
        </dl>
        </div>
      </a>
    </li>
    <li>
      <a :href="url3" ca="201788_cxjh5_promote88_buyCoupon$全合成机油保养套餐5L">
        <div class="pic"><img src="../../../assets/image/promote88/oil02.png" /></div>
        <div class="info">
        <div class="des">全合成机油保养套餐 5L</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>528</span><br/><cite>门市价¥718起</cite></p>
          </dt>
          <dd>
              <span class="goto">立即抢购</span>
          </dd>
        </dl>
        </div>
      </a>
    </li>
    <li>
      <a :href="url4" ca="201788_cxjh5_promote88_buyCoupon$全合成机油保养套餐4L">
        <div class="pic"><img src="../../../assets/image/promote88/oil02.png" /></div>
        <div class="info">
        <div class="des">全合成机油保养套餐 4L</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>438</span><br/><cite>门市价¥598起</cite></p>
          </dt>
          <dd>
              <span class="goto">立即抢购</span>
          </dd>
        </dl>
        </div>
      </a>
    </li>
    <li>
      <a :href="url5" ca="201788_cxjh5_promote88_buyCoupon$半合成机油保养套餐5L">
        <div class="pic"><img src="../../../assets/image/promote88/oil03.png" /></div>
        <div class="info">
        <div class="des">半合成机油保养套餐 5L</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>418</span><br/><cite>门市价¥568起</cite></p>
          </dt>
          <dd>
              <span class="goto">立即抢购</span>
          </dd>
        </dl>
        </div>
      </a>
    </li>
    <li>
      <a :href="url6" ca="201788_cxjh5_promote88_buyCoupon$半合成机油保养套餐4L">
        <div class="pic"><img src="../../../assets/image/promote88/oil03.png" /></div>
        <div class="info">
        <div class="des">半合成机油保养套餐 4L</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>368</span><br/><cite>门市价¥468起</cite></p>
          </dt>
          <dd>
              <span class="goto">立即抢购</span>
          </dd>
        </dl>
        </div>
      </a>
    </li>
  </ul>
  <div class="title"></div>
  <div>
    <ul class="goods-list-by">
      <li>
        <a ca="201788_cxjh5_promote88_buyCoupon$半合成保养+清洁套餐" @click="showSelectCity(skuCode1)">
          <dl>
            <dd>
              <img src="../../../assets/image/promote88/img01.png" />
            </dd>
            <dt>
              <p class="des">半合成保养+清洁套餐</p>
              <p class="info">赛倍飒红赛小保养套餐<br/>发动机无损清洗<br/>节气门清洁</p>
              <p class="price" >
                <span><i>¥</i>498</span><i class="goto">立即抢购</i>
              </p>
            </dt>
          </dl>
        </a>
      </li>
      <li>
        <a ca="201788_cxjh5_promote88_buyCoupon$全合成保养+清洁套餐" @click="showSelectCity(skuCode2)">
          <dl>
            <dd>
              <img src="../../../assets/image/promote88/img01.png" />
            </dd>
            <dt>
              <p class="des">全合成保养+清洁套餐</p>
              <p class="info">赛倍飒红赛小保养套餐<br/>发动机无损清洗<br/>节气门清洁</p>
              <p class="price" >
                <span><i>¥</i>628</span><i class="goto">立即抢购</i>
              </p>
            </dt>
          </dl>
        </a>
      </li>
      <li>
        <a ca="201788_cxjh5_promote88_buyCoupon$高端全合成保养+清洁套餐" @click="showSelectCity(skuCode3)">
          <dl>
            <dd>
              <img src="../../../assets/image/promote88/img02.png" />
            </dd>
            <dt>
              <p class="des">高端全合成保养+清洁套餐</p>
              <p class="info">赛倍飒红赛小保养套餐<br/>发动机无损清洗<br/>节气门清洁</p>
              <p class="price" >
                <span><i>¥</i>828</span><i class="goto">立即抢购</i>
              </p>
            </dt>
          </dl>
        </a>
      </li>
    </ul>
  </div>
  <a class="goto-page" :href="fhcUrl">钜惠风暴  冰价来袭 >></a>
  <div class="slidebar">
    <a :href="homeUrl" class="icon-tozhu" ca="201788_cxjh5_promote88_sidebar_tozhu$主会场"></a>
    <a href="javascript:void(0)" v-if="isApp" @click="share" class="btn-share" ca="201788_cxjh5_promote88_sidebar_share$分享"></a>
    <a href="javascript:void(0)" @click="goTop" class="gotop" ca="201788_cxjh5_promote88_sidebar_Top$返回顶层"></a>
  </div>
 </div>
</template>
<script type="text/javascript">
import common from "../../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
            url1: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F13D883593C3BD501.htm') : this.changeUrl('A0DE0AAC4FAFE9FDF50A8C6919E36A3E.htm'),
            url2: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F7BD365C8E045E6F8.htm') : this.changeUrl('A0DE0AAC4FAFE9FD7FCDECCC5F500479.htm'),
            url3: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('ACCEEBC0A186ED65FAD8682C93D9D203.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F1940FDC5CF2E79D3.htm') : this.changeUrl('1B47E1B4F19C8B49D590A5531A46412D.htm'),
            url4: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('ACCEEBC0A186ED65FAD8682C93D9D203.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F26099395781F7E22.htm') : this.changeUrl('A0DE0AAC4FAFE9FD13D883593C3BD501.htm'),
            url5: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8FF50A8C6919E36A3E.htm') : this.changeUrl('1B47E1B4F19C8B49FAD8682C93D9D203.htm'),
            url6: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F7FCDECCC5F500479.htm') : this.changeUrl('A0DE0AAC4FAFE9FD1940FDC5CF2E79D3.htm'),
            skuCode1: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045721'	: process.env.NODE_ENV == 'pre' ? '1067453' : '1077149',
            skuCode2: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045720'	: process.env.NODE_ENV == 'pre' ? '1067454' : '1077150',
            skuCode3: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045720'	: process.env.NODE_ENV == 'pre' ? '1067455' : '1077151',										
            signUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? common.isEnv("//recruit") : common.isEnv("//wx"),
            isApp: common.isApp(),
            loadAppUrl: '//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0807_88hyzqyl',
            homeUrl: common.isEnv('//c') + '/promotion/88zhuhuichang.htm?channel=cx_home_201788_cxjh5_20170801',
            fhcUrl: process.env.NODE_ENV == 'development' ? '/cxjpsessions/cxjpsessions.html' : '/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml'
        }
    },
    mounted: function() {
      //打点
      this.$nextTick(function () {
      	common.ANA_AnalyticsScan();
      });
      //监控返回顶部按钮是否显示
			this.isShowTopBtn();
      //分享
      this.initShareInfo();
    },
   methods: {
      //分享信息
    	initShareInfo() {
				var _this = this;
				_this.shareObj = {
					friend:{
						title: "保养聚划算",
						desc: "半合成小保养套餐最低333元起，成本价开抢，单品够划算 套装价更低！",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/promote88/hotsale/hotsale.shtml?channel=cx_cxj_xzy_0807_88hyzqyl"
					},
					friendQuan:{
						title: "保养聚划算",
						desc: "半合成小保养套餐最低333元起，成本价开抢，单品够划算 套装价更低！",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/promote88/hotsale/hotsale.shtml?channel=cx_cxj_xzy_0807_88hyzqyl"
					}
				}

				//分享判断渠道
				if(!_this.isApp){       
					common.wxShare(_this);
				}
			},
			//分享
			share() {
				var _self = this;
				lb.shareInfo({
					title: _self.shareObj.friend.title,
					url: _self.shareObj.friend.link,
					content: _self.shareObj.friend.desc,
					imgUrl: _self.shareObj.friend.imgUrl
				} ,(data) => {
					if (data.errorCode === '0') {
							//Toast('分享成功');
					}else{
							Toast('分享失败');
					}
				});
			},
      //选择城市
			showSelectCity(code) {
				var _this = this;
				if(_this.isApp) {						
					window.location.href = "selectCity/selectCity." + common.isHtml() + '?skuCode=' + code;
				}else {
					window.location.href = _this.loadAppUrl;
				}         
			},
      //判断渠道是否加checklogin, app加前置登录
			changeUrl (val) {
				if(val =='') return 'javascript:void(0)';
				if(common.isApp()){
					return common.isEnv('//cxj.activity') + "/service/error/check_login_and_tologin?backUrl="+encodeURI(common.isEnv('https://h.mall') + '/mdseDetail_v2/' + val);
				}else {
					return common.isEnv('//h.mall') + '/mdseDetail_v2/' + val;
				}
			},
      //返回顶部
			goTop() {
				//获取当前scrollTop的位置
				var curScroll = $(document.body).scrollTop();
         
				//上升的位移
				var speed = 5; 
				if(curScroll>0){
						setInterval(timer,1);
				}
				function timer(){ 
					if(curScroll>0){ 
						curScroll = curScroll-speed;
						$(document.body).scrollTop(curScroll);
						if(curScroll<=0){ 
							$(document.body).scrollTop(0);
							clearInterval(timer);
							//console.log("清除计时器") 
						}
					}
				}
      },
      isShowTopBtn() {
				$(window).scroll(()=>{
					let top = document.documentElement.scrollTop || document.body.scrollTop;
          if(top >= 30) {
						$(".gotop").css('display','block');
					}
					else {
						$(".gotop").css('display','none');
					}
				})
			}
    }
}  
  
</script>
<style lang="scss" scope>
@import '../../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
   background-color:#ff3f4f;
   padding-bottom:rem(80);
   max-width:750px;
   margin:0 auto;
}
header{
  background:transparent url("../../../assets/image/promote88/head-oil.png") no-repeat top left;
  width:rem(750);
  height:rem(539);
  background-size:cover;
}
.sideBtn{height:rem(81);width:rem(81);display:inline-block;margin-bottom:rem(24);border-radius: 50%;box-shadow: 0 1px 1px #555;}
.title{
  background:transparent url("../../../assets/image/promote88/title-oil.png") no-repeat top left;
  width:rem(750);
  height:rem(199);
  background-size:cover;
}
.goods-list{
  background-color:#ff855e;
  padding:rem(20);
  clear:both;
  overflow:hidden;
  li:nth-child(even){
    margin-right:0;
  }
  li{
    width:rem(345);
    background-color:#fff;
    border-radius:rem(10);
    float:left;
    margin-right:rem(20);
    margin-bottom:rem(20);
    .pic{
      img{
        width:100%;
        border-radius:rem(10);
      }
    } 
    .info{
      padding:rem(20);
    }
    .des{
         font-size:rem(22);
         margin-top:rem(20);
         color:$_333;
    }
    dl{
      clear:both;
      overflow:hidden;
    }
    dt{
      width:45%;
      float:left;
    }
    dd{
      width:55%;
      float:left;
    }
    dt{
      .price{
        margin-top:rem(20);
        span{
          font-size:rem(44);
          color:#e1121c;
          i{
            font-size:rem(30);
          }
        }
        cite{
          font-size:rem(20);
          color:#999;
          text-decoration:line-through;
        }
      }
    }
    dd{
      .goto{
        display:inline-block;
        width:rem(160);
        height:rem(50);
        line-height:rem(50);
        background-color:#f22129;
        color:#fff;
        text-align:center;
        border-radius:rem(10);
        vertical-align: bottom;
        margin-top:rem(55);
        float:right;
      }
    }
  }
}
.goods-list-by{
  li{
    margin: 0 rem(20) rem(30) rem(20);
    background-color:#fff;
    clear:both;
    overflow:hidden;
    dt{
      width:60%;
      float:left;
    }
    dd{
      width:40%;
      float:left;
    }
    dd img{
      width:100%;
    }
    dt{
      padding:rem(10) rem(20) rem(10) rem(20);
      .des{
         font-size:rem(30);
         margin-top:rem(20);
      }
      .info{
        line-height:rem(35);
        font-size:rem(24);
        margin-top:rem(10);
      }
      .price{
        margin-top:rem(20);
        span{
          font-size:rem(42);
          color:#e1121c;
          i{
            font-size:rem(30);
          }
        }
        cite{
          font-size:rem(24);
          margin-left:rem(10);
          color:#999;
          text-decoration:line-through;
        }
      }
      .goto{
          display:inline-block;
          margin-top:rem(15);
          width:rem(190);
          height:rem(40);
          background-color:#00b7ee;
          text-align:center;
          line-height:rem(40);
          font-size:rem(24);
          color:#fff;
          border-radius:rem(10);
          float:right;
      }
    }
  }
}
.goto-page{
  display:block;
  border:3px solid #fff;
  background-color:#ff3f4f;
  color:#fff;
  height:rem(80);
  line-height:2;
  font-size:rem(36);
  text-align:center;
  width:100%;
  max-width:750px;
  position:fixed;
  bottom:0;
  z-index:2;
  box-sizing:border-box;
}
.slidebar{position: fixed;width:rem(81); bottom:rem(50);right:rem(12);z-index: 200;
  .gotop{@extend .sideBtn;display:none;background:url(../../../assets/image/cxjpsessions/icon-gotop.png) no-repeat;background-size:100%;}
  .btn-share{@extend .sideBtn;background:url(../../../assets/image/cxjpsessions/btn-icon-share.png) no-repeat;background-size:100%;}
  .icon-tozhu{@extend .sideBtn;background:url(../../../assets/image/cxjpsessions/icon-tozhu.png) no-repeat;background-size:100%;}
}
</style>

